<template>
	<view class="box-category">
		<view
			class="category-item"
			@click="open_themeColumn(item.category)"
			v-for="item in arr_category_data.value"
			:key="item.id"
		>
			<view class="box-img">
				<!-- <image class="image" :src="item.url" mode="aspectFill"></image> -->
				<ImageLoading :src="item.url"></ImageLoading>
			</view>
			<view class="text">{{ item.name }}</view>
		</view>
	</view>
</template>

<script setup>
import { onBeforeMount, reactive } from 'vue'
import { get_index_index_category_date } from '../../../api'

const arr_category_data = reactive({ value: [] })

const api_get_index_index_category_date = async function () {
	let res = await get_index_index_category_date()
	arr_category_data.value = res.data
}

onBeforeMount(() => {
	api_get_index_index_category_date()
})

const open_themeColumn = function (category) {
	let arg = '?category=' + category
	uni.navigateTo({
		url: '/pages/themeColumn/themeColumn' + arg
	})
}
</script>

<style lang="scss" scoped>
.box-category {
	width: 100%;
	margin-top: 40rpx;
	@extend .f-c-c-n;
	justify-content: space-around;
	.category-item {
		@extend .f-c-c-n;
		flex-direction: column;
		.box-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			border: 1px solid white;
			box-shadow: 0 0 36rpx $my-color1;
			overflow: hidden;
		}
		.text {
			font-size: 22rpx;
			color: #444;
			background: radial-gradient(circle, #ffc2b0, transparent);
		}
	}
}
</style>
